import { useRef, useState } from "react";

import MenuMui from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";

import { MoreMenuIcons } from "shared/icons";
import { IconButton } from "shared/ui/iconButton";

import { MenuProps } from "./index.types";

export const Menu = (props: MenuProps) => {
	const { items } = props;

	const anchorEl = useRef<HTMLButtonElement | null>(null);

	const [isOpen, setIsOpen] = useState(false);

	const handleClose = () => setIsOpen(false);

	return (
		<>
			<IconButton ref={anchorEl} onClick={() => setIsOpen(true)}>
				<MoreMenuIcons />
			</IconButton>
			<MenuMui
				id="basic-menu"
				anchorEl={anchorEl?.current}
				open={isOpen}
				onClose={handleClose}
			>
				{items.map(({ title, leftIcon, rightIcon, handleClick }, i) => (
					<MenuItem key={i} onClick={() => handleClick()}>
						{leftIcon}
						{title}
						{rightIcon}
					</MenuItem>
				))}
			</MenuMui>
		</>
	);
};
